<template>
  <div class="content">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div style="min-height: 100vh;" v-show="isInit">
        <van-cell-group title="收藏歌曲列表">
          <div class="song_list" v-for="item in favorite_list" :key="favorite_list.music_id">
            <van-cell border>
              <template #icon>
                <div class="icon">
                  <van-image width="60" height="60" radius="5" :src="item.img"/>
                </div>
              </template>
              <template #title>
                <div class="title">
                  <h3>{{ item.music_name }}</h3>
                </div>
              </template>
              <template #label>
                <div class="label">
                  <span>{{ item.music_singer }}</span>
                </div>
              </template>
              <template #right-icon>
                <div class="right-icon">
                  <van-button size="small" @click="cancelCollect(item.music_id)">移除</van-button>
                </div>
              </template>
            </van-cell>
          </div>
          <div class="no-content" v-show="favorite_list.length===0">
            <span>暂时没有喜欢的歌曲</span>
          </div>
        </van-cell-group>

      </div>
    </van-pull-refresh>
    <van-loading class="loading" type="spinner" v-show="!isInit" color="#1989fa" />
  </div>
</template>
<script>
import api from "@/api/api";
import {convertImgUrl} from "@/utils/const";

export default {
  name: "Favorite",
  data() {
    return {
      favorite_list: [],
      isLoading:false,
      isInit:false
    }
  },
  methods:{
    onRefresh(){
      this.load()
    },
    load(){
      let that = this
      that.isLoading=true
      api.getLikeList().then(res => {
        MiniApp.getSongs({
          album_audio_ids: res,
          success(res) {
            that.favorite_list = res.song_data_list.map(item => {
              return {
                music_id: item.album_audio_id,
                img: convertImgUrl(item.album_sizable_cover||item.authors[0].sizable_avatar),
                music_name: item.audio_name,
                music_singer: item.author_name
              }
            })
            that.isLoading=false
            that.isInit=true
          }
        })
      })
    },
    cancelCollect(music_id){
      let that=this
      MiniApp.showModal({
        title:"提示",
        content:"确认删除？",
        showCancel:true,
        cancelText:"取消",
        confirmText:"确认",
        success(res) {
          if (res.confirm){
            api.cancelCollect(music_id).then(res=>{
              if (res){
                let index=that.favorite_list.findIndex(item=>item.music_id===music_id)
                let msg=""
                index!==-1&&that.favorite_list.splice(index,1)
                index===-1?msg="删除目标不存在":msg="删除成功"
                MiniApp.showToast({title:msg})
              }
            })
          }
        }
      })
    }
  },
  mounted(){
    this.load()
  }
}
</script>

<style scoped>
.icon {
  margin-right: 20px;
}

.song_list {
  margin-bottom: 20px;
}
</style>